<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击获取search参数</button>
    <div class="container"></div>
    <script>
        // 1.获取search参数
        // 2.解析参数 
        // 获取参数之后把参数 放在p标签里现在在当前页面上；

        var btn = document.querySelector("button");
        var containerEle = document.querySelector(".container")
        btn.onclick = function () {
            // decodeURI把中文乱码转回中文显示；
            var str = decodeURI(window.location.search);
            console.log(str);
            var obj = formatSearch(str);
            var htmlStr = `<p>姓名是${obj.name}年龄是${obj.age}身高是${obj.height}</p>`;
            containerEle.innerHTML = htmlStr;
        }


        // 
        // var str = "?name=张三&age=20&height=178cm";
        // //  "?name=张三&age=20&height=178cm"  -----》{name:"张三",age:20,height:"178cm"};
        // // 去掉字符串中的"?"
        // str = str.substr(1);
        // // console.log(str);
        // // 通过 & 符号 把字符串变成数组；
        // var arr = str.split("&");
        // console.log(arr);
        // //    循环arr数组
        // var obj = {};
        // arr.forEach(function (item) {
        //     // console.log(item);
        //     var newarr = item.split("=");
        //     console.log(newarr);
        //     obj[newarr[0]] = newarr[1];
        // })
        // console.log(obj);


        // 封装成函数 ： 输入一个search参数  输出一个对应的对象

        function formatSearch(str) {
            str = str.substr(1);
            var arr = str.split("&");
            var obj = {};
            arr.forEach(function (item) {
                var newarr = item.split("=");
                obj[newarr[0]] = newarr[1];
            })
            return obj;
        }
    //     var str = "?name=张三&age=20&height=178cm";
    //    var obj =  formatSearch(str);
    //    console.log(obj);

    // a页面里有一个a链接 点击a链接的时候跳转到b页面 且传参数 num1=10，num2=20；b页面上显示出来；

    </script>
</body>

</html>